<template>
  <view class="order-detail">
    <view class="form-content">
      <orderForm ref="orderForm" v-if="initFinish" :form-value="formData" :work-id="workId" :form-list="formList" :detail-list="detailList"
                 :rules="rules" edit-able able-upload />
    </view>
    <view class="btn-content" v-if="initFinish">
      <button :disabled="!ableSubmit" @click="submit" class="login-btn cu-btn block bg-blue lg">提交</button>
    </view>
  </view>
</template>

<script>
  import {
    getToken,
  } from '@/utils/auth';
  import orderForm from '../../../common/order-form/orderForm.vue';
  import {
    getMeasureOrderDetail,
    commitMeasureOrder,
    measureCompleteOffice,
  } from '../../../../api/device/device.js';
  import mixins from '../mixins';
  import {
    showConfirm,
  } from '@/utils/common';
  
  // let formList = [
  //   {
  //     name: '设备名称',
  //     code: 'eqName',
  //     disable: true,
  //   },
  //   // {
  //   //   name: '检测机构',
  //   //   code: 'mpDetectOrg',
  //   //   required: true,
  //   // },
  //   // {
  //   //   name: '鉴定人',
  //   //   code: 'mpDetectUser',
  //   //   required: true,
  //   // },
  //   // {
  //   //   name: '证书编号',
  //   //   code: 'mpDetectNo',
  //   //   required: true,
  //   // },
  //   // {
  //   //   name: '检测费用',
  //   //   code: 'mpDetectFee',
  //   //   required: true,
  //   // },
  //   {
  //     name: '操作人',
  //     code: 'updateBy',
  //     required: true,
  //   },
  // ];
  
  export default {
    components: {
      orderForm,
    },
    mixins: [ mixins ],
    data() {
      return {
        workId: '',
        formData: {},
        initFinish: false,
        ableSubmit: true,
        orderStatus: 1,
        formList: [
          {
            name: '设备名称',
            code: 'eqName',
            disable: true,
          },
        ],
        rules: {
          // mpDetectOrg: {
          //   rules: [
          //     {
          //       required: true,
          //       errorMessage: '请填写检测机构',
          //     },
          //   ],
          // },
          // mpDetectUser: {
          //   rules: [
          //     {
          //       required: true,
          //       errorMessage: '请填写鉴定人',
          //     },
          //   ],
          // },
          // mpDetectNo: {
          //   rules: [
          //     {
          //       required: true,
          //       errorMessage: '请填写证书编号',
          //     },
          //   ],
          // },
          // mpDetectFee: {
          //   rules: [
          //     {
          //       required: true,
          //       errorMessage: '请填写检测费用',
          //     },
          //   ],
          // },
          updateBy: {
            rules: [
              {
                required: true,
                errorMessage: '请填写操作人',
              },
            ],
          },
        },
      };
    },
    created() {
    },
    methods: {
      async getData() {
        let rules = this.rules;
        let formList = [ ...this.formList ];
        const res = await getMeasureOrderDetail({
          workId: this.workId,
        }).catch(() => {
        });
        if (res.code === 200) {
          this.formData = res.data;
        }
        if (this.orderStatus < 2) {
          formList = [
            ...formList,
            {
              name: '检测机构',
              code: 'mpDetectOrg',
            },
            {
              name: '鉴定人',
              code: 'mpDetectUser',
            },
            {
              name: '证书编号',
              code: 'mpDetectNo',
            },
            {
              name: '检测费用',
              code: 'mpDetectFee',
              required: true,
            },
          ];
          rules = {
            ...rules,
            // mpDetectOrg: {
            //   rules: [
            //     {
            //       required: true,
            //       errorMessage: '请填写检测机构',
            //     },
            //   ],
            // },
            // mpDetectUser: {
            //   rules: [
            //     {
            //       required: true,
            //       errorMessage: '请填写鉴定人',
            //     },
            //   ],
            // },
            // mpDetectNo: {
            //   rules: [
            //     {
            //       required: true,
            //       errorMessage: '请填写证书编号',
            //     },
            //   ],
            // },
            mpDetectFee: {
              rules: [
                {
                  required: true,
                  errorMessage: '请填写检测费用',
                },
                {
                  validateFunction: function (rule, value, data, callback) {
                    const reg = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/;
                    if (reg.test(value)) {
                      return true;
                    }
                    return callback('请输入正确数字(保留两位小数)');
                  },
                },
              ],
            },
          };
        } else {
          formList = [
            ...formList,
            {
              name: '验收说明',
              code: 'workReceiveRemark',
              required: true,
            },
          ];
          
          rules = {
            ...rules,
            workReceiveRemark: {
              rules: [
                {
                  required: true,
                  errorMessage: '请填写验收说明',
                },
              ],
            },
          };
        }
        this.formList = [ ...formList ];
        this.rules = rules;
        
        this.initFinish = true;
      },
      async submit() {
        const {
          workId,
          orderStatus,
        } = this;
        const orderForm = this.$refs.orderForm[ 0 ] || this.$refs.orderForm;
        const {
          formData,
          isSuccess,
        } = await orderForm.getFormData();
        if (!isSuccess) {
          return;
        }
        formData.workId = workId;
        if (orderStatus > 1) {
          this.orderComplete(formData);
          return;
        }
        this.ableSubmit = false;
        this.commitOrder(formData);
      },
      async orderComplete(formData) {
        const confirm = await showConfirm('确定验收合格？').catch(() => {
        });
        if (!confirm.confirm) {
          return;
        }
        
        this.ableSubmit = false;
        const res = await measureCompleteOffice(formData).catch(() => {
          this.ableSubmit = true;
        });
        if (res) {
          if (res.code === 200) {
            uni.showToast({
              title: '提交成功',
              icon: 'success',
            });
            setTimeout(() => {
              this.ableSubmit = true;
              uni.navigateBack({
                delta: 1,
              });
            }, 2000);
            return;
          }
          this.ableSubmit = true;
          uni.showToast({
            title: res.msg || '提交失败',
            icon: 'error',
          });
        }
        this.ableSubmit = true;
      },
      async commitOrder(formData) {
        this.ableSubmit = false;
        const res = await commitMeasureOrder(formData).catch(() => {
          this.ableSubmit = true;
        });
        if (res) {
          if (res.code === 200) {
            uni.showToast({
              title: '提交成功',
              icon: 'success',
            });
            setTimeout(() => {
              this.ableSubmit = true;
              uni.navigateBack({
                delta: 1,
              });
            }, 2000);
            return;
          }
          this.ableSubmit = true;
          uni.showToast({
            title: res.msg || '提交失败',
            icon: 'error',
          });
        }
        this.ableSubmit = true;
      },
    },
    // onShow() {
    //   const pageList = getCurrentPages();
    //   const param = pageList[ pageList.length - 1 ].options || {};
    // },
    onLoad(e) {
      this.workId = e.workId;
      this.orderStatus = e.status * 1;
      this.getData();
    },
  };
</script>

<style lang="scss" scoped>
  .order-detail {
    
    &,
    * {
      box-sizing: border-box;
    }
    
    height: 100vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    .form-content {
      flex: 1;
      padding: 10px;
      overflow: auto;
    }
    
    .btn-content {
      padding: 10px;
    }
  }
</style>
